<template>
  <Header>
    <Menu mode="horizontal" theme="dark" active-name="1">
      <div class="layout-logo">后台管理系统</div>
      <div class="layout-nav">
        <!--<MenuItem name="1">
          <Icon type="ios-navigate"></Icon>
          Item 1
        </MenuItem>
        <MenuItem name="2">
          <Icon type="ios-keypad"></Icon>
          Item 2
        </MenuItem>
        <MenuItem name="3">
          <Icon type="ios-analytics"></Icon>
          Item 3
        </MenuItem>
        <MenuItem name="4">
          <Icon type="ios-paper"></Icon>
          Item 4
        </MenuItem>-->
        <Dropdown style="margin-left: 350px">
          <a href="javascript:void(0)">
            admin
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem @click.native="resetPwd">修改密码</DropdownItem>
            <DropdownItem @click.native="toLogout">退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>


        <!--修改密码-->
        <Modal v-model="modal1" title="修改密码" @on-ok="toUpdatePwd" @on-cancel="cancel">
          <p class="edit-pwd">
            <label for="oldPwd">旧密码：</label>
            <Input id="oldPwd" v-model="oldPwdVal" placeholder="请输入旧密码..." style="width: 300px"/>
          </p>
          <p class="edit-pwd">
            <label for="newPwd">新密码：</label>
            <Input id="newPwd" v-model="newPwdVal" type="password" placeholder="请输入新密码..." style="width: 300px"/>
          </p>
        </Modal>
      </div>
    </Menu>
  </Header>
</template>

<script>
  export default {
    data() {
      return {
        modal1: false,
        oldPwdVal: '',
        newPwdVal: ''
      }
    },
    methods: {
      resetPwd() {

        this.modal1 = true;
        this.oldPwdVal = '';
        this.newPwdVal = '';

      },
      toLogout() {
        this.$Message.info('退出成功！');
      },
      toUpdatePwd() {

        //验证
        if (this.oldPwdVal.length == 0) {
          this.$Message.info('旧密码为空请重新输入');
          return false;
        }

        if (this.newPwdVal.length == 0) {
          this.$Message.info('新密码为空请重新输入');
          return false;
        }

        if (this.oldPwdVal == this.newPwdVal) {
          this.$Message.info('密码一致,请更换密码');
          return false;
        }
        this.$Message.info('密码更改成功！');
      },
      cancel() {//修改密码弹窗取消事件
        //  this.$Message.info('您点击了取消！');
      }
    }
  }
</script>

<style scoped>
  .layout-logo {
    line-height: 30px;
    color: #fff;
    text-align: center;
  }

  a {
    color: #fff;
  }

  .edit-pwd {
    margin: 10px auto;
  }
</style>
